<template>
  <a-drawer
    title="退款"
    :visible="visible"
    :destroyOnClose="true"
    :width="1000"
    :body-style="{
      overflow: 'auto',
    }"
    @close="handleClose"
  >
    <CustomTable
      titleName="可退款列表"
      ref="customTable"
      :requestInfo="requestInfo"
      :extraParams="extraParams"
      :hasMoreAction="false"
      :hasRowSelection="true"
      :rightButtons="rightButtons"
      :columns="columns"
      @request="$utils.commonRequest"
      :tableConfig="$store.getters.tableConfig"
      @changeSelectData="changeSelectData"
    >
    </CustomTable>

    <!--  退款操作  -->
    <BillRefundModal
      :billIds="billIds"
      :visible="refundVisible"
      @handleClose="refundVisible = false"
      @handleSuccess="handleRefundSuccess"
    />
  </a-drawer>
</template>

<script>
import {defineComponent, reactive, toRefs, computed, watch, ref, createVNode} from "vue";
import {Form, message, Modal} from "ant-design-vue";
import request from "@/common/utils/request";
import _ from "lodash";
import BLCOMMON from "bl-common-vue3";
import utils from "@/common/utils/utils";
import { CustomTable } from "bl-common-vue3";
import BillRefundModal from "@/views/bill/AllBills/modules/BillRefundModal.vue";

import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  name: "SelectBillRefundDrawer",
  components: {
    CustomTable,
    BillRefundModal,
  },
  props: {
    // 打开弹框
    visible: {
      type: Boolean,
      default: false,
    },
    roomId: {
      type: [Number, String],
      default: 0,
    },
    ownerId:  {
      type: [Number, String],
      default: 0,
    },
  },

  setup(props, { emit }) {
    const state = reactive({
      requestInfo: {
        service: '/org', // 请求服务
        serviceUrl: '/bill/list', // 请求url
        serviceType: 'post', // 请求方式
        pageSizeFields: 'limit',
      },
      customTable: null,
      billIds: [],
      refundVisible: false,
      isSuccess: false,
    });


    const extraParams = computed(() => {
      return {isRefund: 1, roomId: props.roomId || undefined,  ownerId: props.ownerId || undefined}
    });

    const rightButtons = computed(() => {
      return [
        {
          name: "退款",
          key: "refund",
          onClick: () => {
            state.refundVisible = true;
          },
          props: {
            type: "primary",
            disabled: !state.billIds?.length
          },
        },
      ]
    });

    const handleClose = () => {
      emit("handleClose", state.isSuccess);
    };

    const changeSelectData = (keys, rows) => {
      state.billIds = keys;
    };

    const handleRefundSuccess = () => {
      state.refundVisible = false;
      state.billIds.splice(0, state.billIds.length);
      state.isSuccess = true;
      state.customTable?.loadData(true);
    };



    const init = () => {
      state.isSuccess = false;
    };
    const reset = () => {
      state.billIds.splice(0, state.billIds.length);
    };


    watch(
      () => props.visible,
      (visible) => {
        if (visible) {
          init();
        } else {
          reset();
        }
      }
    );



    return {
      ...toRefs(state),
      extraParams,
      columns,
      handleClose,
      changeSelectData,
      rightButtons,
      handleRefundSuccess,
    };
  },
});
const columns = [
  {
    title: "账单编号",
    dataIndex: "bill_number",
    key: "bill_number",
    columnType: 'billInfo',
    idFields: 'id',
  },
  {
    title: "费用类型",
    dataIndex: "cost_type_txt",
    key: "cost_type_txt",
  },
  {
    title: "所属公司",
    dataIndex: "org_branch_name",
    key: "org_branch_name",
  },
  {
    title: "账单周期",
    dataIndex: "contractOn",
    key: "contractOn",
    customRender: ({ text, record, index }) => {
      return `${record.start_date} ~ ${record.end_date}`;
    },
  },
  {
    title: "账单金额",
    dataIndex: "bill_amount",
    key: "bill_amount",
    customRender: ({ text, record, index }) => {
      return text || '--';
    },
  },
  {
    title: "应收金额",
    key: "receivable_payment",
    dataIndex: "receivable_payment",
    customRender: ({ text, record, index }) => {
      return text || '--';
    },
  },
  {
    title: "实收金额",
    key: "actual_payment",
    dataIndex: "actual_payment",
    customRender: ({ text, record, index }) => {
      return text || '--';
    },
  },
]

</script>

<style lang="less" scoped>
.carry-content {
  max-height: calc(80vh - 100px);
  overflow-y: auto;
}
</style>
